<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <div>父组件</div>
            <test-tom></test-tom>
            <test-link></test-link>
            <div>
                <button @click="handle">销毁事件</button>
            </div>
        </div>
        <script src="./lib/vue.js"></script>
        <script>
            var eventHub = new Vue();
            Vue.component('test-tom', {
                data: function() {
                    return {
                        num: 0
                    };
                },
                template: `
                    <div>
                        <div>TOM:{{num}}</div>
                        <div>
                            <button @click="handle">点击</button>
                        </div>
                    </div>
                `,
                methods: {
                    handle: function() {
                        // 触发兄弟组件的事件
                        eventHub.$emit('link-event', 1);
                    }
                },
                mounted: function() {
                    // 监听事件
                    eventHub.$on('tom-event', val => {
                        this.num += val;
                    });
                }
            });
            Vue.component('test-link', {
                data: function() {
                    return {
                        num: 0
                    };
                },
                template: `
                    <div>
                        <div>TOM:{{num}}</div>
                        <div>
                            <button @click="handle">点击</button>
                        </div>
                    </div>
                `,
                methods: {
                    handle: function() {
                        // 触发兄弟组件的事件
                        eventHub.$emit('tom-event', 2);
                    }
                },
                mounted: function() {
                    eventHub.$on('link-event', val => {
                        this.num += val;
                    });
                }
            });
            var app = new Vue({
                el: '#app',
                data: {},
                methods: {
                    handle: function() {
                        eventHub.$off('link-event');
                        eventHub.$off('tom-event');
                    }
                }
            });
        </script>
    </body>
</html>
